import React, { Component } from 'react';
import { Redirect, Link } from 'react-router-dom'
import { NavBar, Toast, } from 'antd-mobile'
import { logout } from './my'
import { logoutAction } from '../../store/actionCreators';
import { connect } from 'react-redux'
import Avatar from '../../components/MyAvatar'
import Panel from '../../components/panel'
import Message from './message'
import Help from './help'
import Member from './member'
import Net from './net'
import Finance from './finance'
import Mail from './mail'
import './my.css'

const Logout = (props) => {
    return (
        <>
            <p onClick={props.handleLogout}>退出登录</p>
        </>
    );
}



const mapStateToProps = (state) => ({
    info: state.info
})

const mapDispatchToProps = (dispatch) => ({
    logout: () => dispatch(logoutAction())
})

class My extends Component {
    constructor(props) {
        super(props);
        this.handleLogout = this.handleLogout.bind(this);
    }
    handleLogout() {
        logout().then(res => {
            Toast.success(res.message, 1, () => {
                // store.dispatch(logoutAction());
                this.props.logout();
                return <Redirect to="/" />
            })
        })
    }
    render() {
        return (
            <div className="my">
                <NavBar mode="dark" style={{ background: 'linear-gradient(to right, #063d5b, #2789c8)', position: 'sticky', top: '0', left: '0', width: '100%', zIndex: '100' }} rightContent={<Logout handleLogout={this.handleLogout} />}>
                    我的
                </NavBar>
                <Avatar info={this.props.info} />
                <Panel>
                    <Link to="/" className="panelLink">资料管理 ＞</Link>
                    <div className="panelContent">
                        <Message />
                    </div>
                </Panel>
                <Panel>
                    <Link to="/" className="panelLink">YO乐理财 ＞</Link>
                    <div className="panelContent">
                        <Help />
                    </div>
                </Panel>
                <Panel>
                    <Link to="/" className="panelLink">会员管理 ＞</Link>
                    <div className="panelContent">
                        <Member />
                    </div>
                </Panel>
                <Panel>
                    <Link to="/" className="panelLink">网络管理 ＞</Link>
                    <div className="panelContent">
                        <Net />
                    </div>
                </Panel>
                <Panel>
                    <Link to="/" className="panelLink">财务管理 ＞</Link>
                    <div className="panelContent">
                        <Finance />
                    </div>
                </Panel>
                <Panel>
                    <Link to="/" className="panelLink">咨询管理 ＞</Link>
                    <div className="panelContent">
                        <Mail />
                    </div>
                </Panel>
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(My);